<template>
	<view class="flex-col page">
		<u-navbar :title="title" :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>
		<view class="flex-col group">
			<view class="section_2 section_2_m justify-between relative flex-col">
				<view class="flex-col justify-start items-center self-end text-wrapper_2 absolute_m"><text
						class="font_2 text text_2">生成海报</text></view>
			</view>
		</view>
		<image class="shrink-0 image" :src="$util.img(item.image)" mode="aspectFit" />
		<view class="flex-col group">
			<view class="flex-col section_2">
				<view class="flex-row justify-between self-stretch">
					<view class="flex-row self-start">
						<view class="shrink-0 section_3"></view>
						<text class="font text ml-9">{{ item.name }}</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" @click="gz"
						v-if="item.is_collect == 0">
						<text class="font_2 text text_2">关注</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" @click="qxgz"
						v-if="item.is_collect == 1">
						<text class="font_2 text text_2">取消关注</text>
					</view>
				</view>
				<view class="flex-row items-baseline self-stretch group_2">
					<text class="font_2 text">批发价：</text>
					<text class="font_3 text ml-1-5" v-if="item.pf_price == 0">暂无</text>
					<text class="font_3 text ml-1-5" v-else>￥{{ item.pf_price }}</text>
				</view>
				<view class="flex-row justify-between equal-division group_3">
					<view class="flex-row items-baseline">
						<text class="font_2 text">行情价：</text>
						<text class="font_3 text ml-1-5" v-if="item.hq_price == 0">暂无</text>
						<text class="font_3 text ml-1-5" v-else>￥{{ item.hq_price }}</text>
					</view>
					<view class="flex-row items-baseline">
						<text class="font_2 text">指导价：</text>
						<text class="font_3 text text_3 ml-1-5" v-if="item.zd_price == 0">暂无</text>
						<text class="font_3 text text_3 ml-1-5" v-else>￥{{ item.zd_price }}</text>
					</view>
				</view>
			</view>
			<view class="mt-8 flex-col section_2">
				<view class="flex-row justify-between items-center">
					<view class="flex-row">
						<view class="shrink-0 section_3"></view>
						<text class="font_4 text ml-9-5">历史行情</text>
					</view>
					<view class="flex-row">
						<view class="flex-col justify-start items-center"
							:class="date_type == 1 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(1)">
							7天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 2 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(2)">
							30天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 3 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(3)">
							90天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 4 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(4)">
							180天
						</view>
						<view class="flex-col justify-start items-center ml-10-5"
							:class="date_type == 5 ? 'text-wrapper_3' : 'text-wrapper_4'" @click="dateChange(5)">
							1年
						</view>
					</view>
				</view>
				<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas"
					:ec="ec"></uni-ec-canvas>
			</view>
			<view class="mt-8 flex-col section_4">
				<view class="flex-row group_4">
					<view class="section_3"></view>
					<text class="font_4 text text_9 ml-9-5">每日行情</text>
				</view>
				<view class="flex-row items-center group_5">
					<text class="font_6 text text_10">日期</text>
					<text class="font_6 text text_11">当日价格</text>
					<text class="font_6 text text_12">涨跌幅</text>
				</view>


				<view class="flex-row items-center group_5" v-for="(items, index) in list">
					<text class="font_7 text_10">{{ items.date }}</text>
					<text class="font_8 text_11" v-if="items.type == 1">{{ items.price }}</text>
					<text class="font_9 text_11" v-if="items.type == 2">{{ items.price }}</text>
					<view class="flex-row items-center text_12">
						<image class="shrink-0 image_3" v-if="items.type == 1"
							src="https://www.dlxx.top/static/images/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
						<image class="shrink-0 image_4" v-if="items.type == 2"
							src="https://www.dlxx.top/static/images/b8648e7e42bc7f1191ac8107348f7064.png" />
						<text class="font_8 text" v-if="items.type == 1">{{ items.fd }}</text>
						<text class="font_9 text" v-if="items.type == 2">{{ items.fd }}</text>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null

export default {
	components: {
		uniEcCanvas
	},
	props: {},
	data() {
		return {
			id: '',
			title: '',
			userInfo: [],
			item: {},
			date_type: 1,
			dates: ['2025.02.01', '2025.02.02', '2025.02.03'],
			datas: ['11', '12', '13'],
			list: [],
			ec: {
				lazyLoad: true
			},
			option: {
				title: {
					text: ''
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					},
				},
				grid: {
					top: '15',
					left: "10",
					right: "25",
					bottom: "10",
					show: false,
					containLabel: true,
				},
				xAxis: {
					type: "category",
					data: this.dates,
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						rotate: 0,
						textStyle: {
							color: '#999999'
						}
					},
					axisLine: {
						lineStyle: {
							type: 'dashed',
							color: '#e1e1e1'
						}
					},
					boundaryGap: false,
				},
				yAxis: {
					axisLabel: {
						rotate: 0,
						textStyle: {
							color: '#999999'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						lineStyle: {
							type: 'dashed',
							color: '#e1e1e1'
						}
					},
					splitLine: {
						show: false
					}

				},
				series: [{
					name: '烟价',
					type: 'line',
					areaStyle: {

					},
					itemStyle: {
						normal: {
							color: '#00806b70',
						},
					},
					symbol: 'none', //去掉折线图中的节点
					smooth: true, //true 为平滑曲线，false为直线
					data: this.datas,
				}],

			},
			cat_name: 'yan'
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.title = options.title;
		if (options.cat_name) {
			this.cat_name = options.cat_name
		}

		this.userInfo = uni.getStorageSync('userInfo');
		this.getInfo();

	},
	onUnload() {
		chart = null
	},
	methods: {
		gz() {
			this.$api.sendRequest({
				url: '/api/index/collect',
				data: {
					id: this.id,
					user_id: this.userInfo.id,
					type: this.cat_name
				},
				success: res => {
					if (res.code == 1) {
						this.item.is_collect = 1;
						this.$util.showToast({
							title: '关注成功'
						});
					} else {
						this.$util.showToast({
							title: '操作失败，请重试'
						});
					}
				}
			});
		},
		qxgz() {
			this.$api.sendRequest({
				url: '/api/index/uncollect',
				data: {
					id: this.id,
					user_id: this.userInfo.id,
					type: this.cat_name
				},
				success: res => {
					if (res.code == 1) {
						this.item.is_collect = 0;
						this.$util.showToast({
							title: '取消成功'
						});
					} else {
						this.$util.showToast({
							title: '操作失败，请重试'
						});
					}
				}
			});
		},
		initChart(canvas, width, height, canvasDpr) {
			console.log(canvas, width, height, canvasDpr)
			chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: canvasDpr
			})
			canvas.setChart(chart)
			chart.setOption(this.option)
			return chart
		},
		dateChange(type) {
			uni.showLoading({
				title: '加载中'
			})
			this.date_type = type;
			this.getInfo();
			uni.hideLoading();
		},
		getInfo() {
			var url = '/api/index/getYanInfo'
			if (this.cat_name == 'jiu') {
				url = '/api/index/getJiuInfo'
			}
			this.$api.sendRequest({
				url: url,
				data: {
					id: this.id,
					type: this.date_type
				},
				success: res => {
					console.log(res.data)
					if (res.code == 1) {
						this.item = res.data;
						this.list = res.data.list;
						this.dates = res.data.date;
						this.datas = res.data.data;
						this.option = {
							title: {
								text: ''
							},
							tooltip: {
								trigger: "axis",
								axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
								},
							},
							grid: {
								top: '15',
								left: "20",
								right: "30",
								bottom: "10",
								show: false,
								containLabel: true,
							},
							xAxis: {
								type: "category",
								data: this.dates,
								axisTick: {
									alignWithLabel: true,
								},
								axisLabel: {
									rotate: 0,
									textStyle: {
										color: '#999999'
									}
								},
								axisLine: {
									lineStyle: {
										type: 'dashed',
										color: '#e1e1e1'
									}
								},
								boundaryGap: false,
							},
							yAxis: {
								axisLabel: {
									rotate: 0,
									textStyle: {
										color: '#999999'
									}
								},
								axisTick: {
									show: false
								},
								axisLine: {
									lineStyle: {
										type: 'dashed',
										color: '#e1e1e1'
									}
								},
								splitLine: {
									show: false
								}

							},
							series: [{
								name: '烟价',
								type: 'line',
								areaStyle: {

								},
								itemStyle: {
									normal: {
										color: '#00806b70',
									},
								},
								symbol: 'none', //去掉折线图中的节点
								smooth: true, //true 为平滑曲线，false为直线
								data: this.datas,
							}]
						}

						this.$refs.canvas.init(this.initChart)
					}
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.uni-ec-canvas {
	width: 100%;
	height: 400rpx;
}

.ml-10-5 {
	margin-left: 21rpx;
}

.mt-14-5 {
	margin-top: 29rpx;
}

.ml-3-5 {
	margin-left: 7rpx;
}

.ml-9-5 {
	margin-left: 19rpx;
}

.ml-1-5 {
	margin-left: 3rpx;
}

.ml-9 {
	margin-left: 18rpx;
}

.ml-5 {
	margin-left: 10rpx;
}

.page {
	background-color: #f5f5f5;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;

	.section {
		padding: 34rpx 0 10rpx;
		background-color: #ffffff;

		.text-wrapper {
			margin-left: 32rpx;
			margin-right: 10rpx;
			padding: 96rpx 0 17rpx;
			background-image: url('https://www.dlxx.top/static/images/05e0093ead41b70437e3214e578e2e5a.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}

	.image {
		width: 750rpx;
		height: 400rpx;
		background-color: #ffff;
	}

	.group {
		margin-top: 16rpx;
		padding: 0 10rpx;

		.section_2 {
			padding: 32rpx 24rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.text-wrapper_2 {
				padding: 12rpx 0;
				background-color: #00806b;
				border-radius: 24rpx;
				width: 128rpx;
				height: 48rpx;

				.text_2 {
					color: #ffffff;
				}
			}

			.group_2 {
				margin-top: 16rpx;
				padding: 0 25rpx;
			}

			.font_2 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 23rpx;
				color: #999999;
			}

			.equal-division {
				align-self: flex-start;
				margin-left: 24rpx;
				margin-top: 38rpx;

				.text_3 {
					color: #b01431;
				}
			}

			.group_3 {
				width: 538rpx;
			}

			.font_3 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 26rpx;
				color: #011613;
			}

			.text-wrapper_3 {
				background-color: #00806b;
				border-radius: 8rpx;
				width: 60rpx;
				height: 36rpx;
				border: solid 1rpx #eeeeee;
				line-height: 34rpx;
				font-size: 20rpx;
				color: #ffffff;
			}

			.text-wrapper_4 {
				background-color: #eeeeee;
				border-radius: 8rpx;
				width: 60rpx;
				height: 36rpx;
				border: solid 1rpx #eeeeee;
				line-height: 34rpx;
				font-size: 20rpx;
				color: #333333;
			}

			.font_5 {
				font-size: 20rpx;
				font-family: PingFangSC;
				line-height: 19rpx;
				color: #011613;
			}

			.image_2 {
				margin-left: 24rpx;
				margin-right: 15rpx;
				width: 644rpx;
				height: 287rpx;
			}
		}

		.section_2_m {
			background-color: #f5f5f5;
			padding: 0;

			.absolute_m {
				top: 15rpx;
				right: 15rpx;
			}
		}

		.section_4 {
			padding: 32rpx 20rpx 45rpx 24rpx;
			background-color: #ffffff;
			border-radius: 10rpx 10rpx 0 0;

			.group_5 {
				padding: 28rpx 0 20rpx;
				border-bottom: solid 2rpx #eeeeee;

				.font_6 {
					font-size: 22rpx;
					font-family: PingFangSC;
					line-height: 22rpx;
					color: #999999;
				}

				.text_10 {
					width: 50%;
				}

				.text_11 {
					width: 25%;
				}

				.text_12 {
					width: 25%;
				}

				.font_8 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 24rpx;
					color: #00806b;
				}

				.image_3 {
					width: 9rpx;
					height: 22rpx;
					margin-right: 7rpx;
				}

				.image_4 {
					width: 9rpx;
					height: 21rpx;
					margin-right: 10rpx;
				}
			}


			.font_7 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 19rpx;
				color: #011613;
			}

			.group_7 {
				padding: 28rpx 2rpx 20rpx;
				border-top: solid 3rpx #eeeeee;

				.pos_7 {
					position: absolute;
					left: 2rpx;
					bottom: 20rpx;
				}

				.pos_8 {
					position: absolute;
					right: 0;
					bottom: 19rpx;
				}
			}

			.font_9 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 24rpx;
				color: #b01431;
			}



			.group_8 {
				padding: 28rpx 2rpx 22rpx;
				border-top: solid 3rpx #eeeeee;

				.pos_11 {
					position: absolute;
					left: 2rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.pos_12 {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.section_3 {
			background-color: #00806b;
			width: 6rpx;
			height: 24rpx;
		}

		.font_4 {
			font-size: 28rpx;
			font-family: PingFangSC;
			line-height: 26rpx;
			color: #011613;
		}
	}

	.font {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 28rpx;
		color: #011613;
	}

	.text {
		text-transform: uppercase;
	}
}

.section_2 {
	margin-top: 12rpx;
	/*padding: 47rpx 0 305rpx;
	  background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/091a7d2b47c1a045b7339d0e02759320.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;*/

}

.absolute_m {
	position: absolute;
}
</style>